import ReactECharts from 'echarts-for-react';
import React, { useState, useEffect } from 'react';

// import { Empty } from 'antd';
import Empty from '@/components/NotData';
import useWindowWidth from '@/hooks/event/use-window-width';

const LineChart = ({ data }) => {
  console.log(data);
  const { isPc } = useWindowWidth();
  const [containerHeight, setContainerHeight] = useState(800);
  const [chartHeight, setChartHeight] = useState(500);
  const AREA_OPACITY = [0.3, 0.2, 0.15];

  useEffect(() => {
    const height = isPc ? window.innerHeight - 250 : window.innerHeight / 2 - 100;
    setContainerHeight(height);
    setChartHeight(height - 50);
  }, []);

  const option = {
    tooltip: {
      trigger: 'axis',
      formatter(params) {
        let result = `${params[0].name}<br/>`;
        params.forEach(function (item) {
          if (item.seriesName === '满意度') {
            result += `${item.marker + item.seriesName}: ${item.value}%<br/>`;
          } else {
            result += `${item.marker + item.seriesName}: ${item.value}<br/>`;
          }
        });
        return result;
      },
    },
    grid: {
      left: isPc ? '2%' : '6%', // 左边距
      right: isPc ? '2%' : '6%', // 右边距
      bottom: '5%', // 底部距离
      top: '15%', // 顶部距离
      containLabel: true, // 包含坐标轴的标签
    },
    xAxis: {
      type: 'category',
      boundaryGap: true,
      splitLine: {
        show: false,
      },
      splitNumber: 10,
      axisLabel: {
        color: '#93ADC9',
        fontWeight: 'bold',
        fontSize: 12,
      },
      data: data.map((item) => item.date),
    },
    yAxis: [
      {
        type: 'value',
        name: '使用人数',
        position: 'left',
        axisLabel: {
          show: false,
          formatter: '{value}',
        },
        splitLine: {
          show: false,
        },
        show: false,
      },
      {
        type: 'value',
        name: '对话数',
        position: 'right',
        offset: 0,
        axisLabel: {
          show: false,
          formatter: '{value}',
        },
        splitLine: {
          show: false,
        },
        show: false,
      },
      {
        type: 'value',
        name: '满意度',
        position: 'right',
        offset: 50,
        axisLabel: {
          show: false,
          formatter: '{value} %',
        },
        splitLine: {
          show: false,
        },
        show: false,
      },
    ],
    series: [
      {
        stack: '使用人数',
        name: '使用人数',
        type: 'line',
        smooth: true,
        symbolSize: 8,
        lineStyle: {
          width: 3,
          color: '#7559FF',
        },
        // areaStyle: {
        //   color: {
        //     type: 'linear',
        //     x: 0,
        //     y: 0,
        //     x2: 0,
        //     y2: 1,
        //     colorStops: [{
        //       offset: 0,
        //       color: 'rgba(117, 89, 255, 0.3)' // 开始颜色
        //     }, {
        //       offset: 1,
        //       color: 'rgba(117, 89, 255, 0)' // 结束颜色
        //     }]
        //   }
        // },
        data: data.map((item) => item.userCount),
        yAxisIndex: 0,
      },
      {
        stack: '对话数',

        name: '对话数',
        type: 'line',
        smooth: true,
        symbolSize: 8,
        lineStyle: {
          width: 3,
          color: '#5ED86F',
        },
        // areaStyle: {
        //   color: {
        //     type: 'linear',
        //     x: 0,
        //     y: 0,
        //     x2: 0,
        //     y2: 1,
        //     colorStops: [{
        //       offset: 0,
        //       color: 'rgba(94, 216, 111, 0.3)' // 开始颜色
        //     }, {
        //       offset: 1,
        //       color: 'rgba(94, 216, 111, 0)' // 结束颜色
        //     }]
        //   }
        // },
        data: data.map((item) => item.questionCount),
        yAxisIndex: 1,
      },
      {
        stack: '满意度',
        name: '满意度',
        type: 'line',
        smooth: true,
        symbolSize: 8,
        lineStyle: {
          width: 3,
          color: '#FF9C40',
        },
        // areaStyle: {
        //   color: {
        //     type: 'linear',
        //     x: 0,
        //     y: 0,
        //     x2: 0,
        //     y2: 1,
        //     colorStops: [{
        //       offset: 0,
        //       color: 'rgba(255, 156, 64, 0.1)' // 开始颜色
        //     }, {
        //       offset: 1,
        //       color: 'rgba(255, 156, 64, 0)' // 结束颜色
        //     }]
        //   }
        // },
        data: data.map((item) => item.satisfaction),
        yAxisIndex: 2,
      },
    ],
  };

  return (
    <div
      style={{
        minHeight: isPc ? 'unset' : '220px',
        height: 'calc(100% - 100px)',
        width: '100%',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        // backgroundColor: data.length > 0 ? '#ECEFF7' : '',
      }}
    >
      {data.length > 0 ? (
        <ReactECharts option={option} style={{ height: isPc ? '100%' : '220px', width: '100%' }} />
      ) : (
        <Empty description="暂无数据" />
      )}
    </div>
  );
};

export default LineChart;
